<template>
  <div class="withdraw" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead title="提现" background-color="linear-gradient(170deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%)"></myHead>
    <div class="top">
      <div class="left">金额</div>
      <div class="right">
        <label>
          <input type="number" name="" placeholder="请输入提现金额"></input>
        </label>
      </div>
    </div>
    <h6>请选择提现方式</h6>
    <div class="type">
      <div class="wechat typeWrap" @click="typeTab(0)">
        <div class="radio">
          <label>
            <label>
              <img src="../../../static/img/business/selected.png" alt="" v-if="type == 0">
              <img src="../../../static/img/business/circle.png" alt="" v-else>
              <input type="radio" name="type" value="0" hidden></input>
            </label>
          </label>
        </div>
        <div class="typeName">
          <img src="../../../static/img/business/icon_wechat.png" alt="" />
          <span>微信提现</span>
        </div>
      </div>
    </div>
    <div class="type">
      <div class="alipay typeWrap" @click="typeTab(1)">
        <div class="radio">
          <label>
            <img src="../../../static/img/business/selected.png" alt="" v-if="type == 1">
            <img src="../../../static/img/business/circle.png" alt="" v-else>
            <input type="radio" name="type" value="1" hidden></input>
          </label>
        </div>
        <div class="typeName">
          <img src="../../../static/img/business/icon_alipay.png" alt="" />
          <span>支付宝提现</span>
        </div>
      </div>
      <label>
        <input type="text" name="" placeholder="请输入提现账号"></input>
      </label>
    </div>
    <div class="sure">提交</div>
  </div>
</template>

<script>
  import myHead from "../../components/BusinessComponents/lib/myHead";

  export default {
      name: "withdraw",
      components: {
        myHead
      },
      data() {
        return {
          type:0,
        };
      },
      methods: {
        typeTab(id){
          if(id == 0){
            this.type = 0;
          }else{
            this.type = 1;
          }
        },
      }
  }
</script>

<style scoped>
  input{
    width: 100%;
    border:none;
    height: 100%;
  }

  .withdraw{
    background: #F5F5F5;
  }
  .withdraw .top{
    display: flex;
    background: #ffffff;
    padding: .5rem .16rem 0;
    height: .44rem;
    font-size: .15rem;
    align-items: center;
  }
  .withdraw .top .right{
    flex-grow: 1;
    padding-left: .24rem;
  }
  .withdraw h6{
    font-size: .14rem;
    color: #BEBEBE;
    padding: .16rem;
    margin: 0;
  }
  .withdraw .type{
    background: #ffffff;
    padding-bottom: .16rem;
    margin-bottom: .1rem;
    overflow: hidden;
  }
  .withdraw .typeWrap{
    display: flex;
    align-items: center;
    padding: .16rem 0;
    margin-bottom: .16rem;
  }
  .withdraw .typeWrap .radio{
    padding: 0 .16rem;
  }
  .withdraw .typeWrap .typeName{
    font-size: .14rem;
    color: #333333;
    display: flex;
    align-items: center;
  }
  .withdraw .typeWrap .typeName img{
    width: .2rem;
    height: .2rem;
    margin-right: .14rem;
  }
  .withdraw .type>label{
    margin-left: .16rem;
    padding: .16rem;
    border-top: 1px solid #E6E6E6;
    font-size: .14rem;
  }
  .withdraw .type .wechat{
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .withdraw .type .radio label img{
    width: .2rem;
    height: .2rem;
  }
  .sure{
    background: linear-gradient(170deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%);;
    width: 3.4rem;
    height: .5rem;
    line-height: .5rem;
    border-radius: .25rem;
    color: #ffffff;
    text-align: center;
    margin-right: .1rem;
    font-size: .15rem;
    position: fixed;
    bottom: .2rem;
    left: 50%;
    transform: translateX(-50%);
  }
</style>
